<template>
  <el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body :before-close="close" center>

    <el-table v-loading="loading" :data="list">
      <el-table-column prop="goods_name" label="商品名称/中文名称" align="center">

        <template slot-scope="scope">
          <span>{{ scope.row.goods_name }}</span>
          <br>
          <span class="text-muted">{{ scope.row.goods_Cname }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="last_month_number" label="上月结转" align="center" />
      <el-table-column prop="this_month_in_number" label="本月入库" align="center" />
      <el-table-column prop="this_month_out_number" label="本月出库" align="center" />
      <el-table-column prop="current_number" label="当前数目" align="center" />
      <el-table-column prop="current_Good_Qty" label="Good_Qty" align="center" />
      <el-table-column prop="current_Hold_Qty" label="Hold_Qty" align="center" />
      <el-table-column prop="current_NG_Qty" label="NG_Qty" align="center" />
      <el-table-column prop="created_at" label="统计时间" align="center" />
    </el-table>
  </el-dialog>
</template>
<script>
import { commodityInventory } from '@/api/stock'
export default {
  name: 'Detailed',
  props: {
    open: {
      type: Boolean
    },
    title: {
      type: String
    },
    statement_id: {
      type: String
    }
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 表格数据
      list: [],
      // 查询参数
      queryParams: {
        page: 1,
        limit: 10
      }
    }
  },
  watch: {
    'open': function(newValue, oldValue) {
      if (newValue === true) {
        this.getList()
      }
    }
  },
  methods: {
    /** 查询列表 */
    getList() {
      const that = this
      this.loading = true
      commodityInventory(this.statement_id).then(response => {
        if (response.code === 10000) {
          that.list = response.data
          console.log(that.list)
          that.loading = false
        }
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        page: 1,
        limit: 10
      }
      this.handleQuery()
    },
    close() {
      this.$emit('update:open', false)
    },
    number(row) {
      var total = parseInt(row.Good_Qty) + parseInt(row.Hold_Qty) + parseInt(row.NG_Qty)
      var number = row.number
      if (number !== 0 && number !== '') {
        if (number > total) {
          row.disc_surplus = parseInt(number - total)
          row.disc_deficit = 0
        } else {
          row.disc_deficit = parseInt(total - number)
          row.disc_surplus = 0
        }
      } else {
        row.disc_surplus = 0
        row.disc_deficit = 0
      }
    },
    handleAdd() {
      const that = this
      this.loading = true
      inventorySonUpdate(this.list).then(response => {
        if (response.code === 10000) {
          that.$message.success(response.message)
          that.$parent.getList()
          that.getList()
          that.loading = false
        }
      })
    }
  }
}
</script>

<style scoped>
.text-muted {
  color: #a8c9c8;
  background-color: #f0f9f0;
  font-weight: 800;
}
</style>

